<template>
<el-card class="box-card-component" style="margin-left:0px;">

    <div style="position:relative;">
        <!-- <pan-thumb :image="avatar" class="panThumb" /> -->
        <!-- <mallki class-name="mallki-text" text="vue-element-admin" /> -->


       <div class="tab">
            <div @click="exchangeItem(i)" v-for="(i,index) in cellList" :key="index" :class="{cell:!i.selected ,active:i.selected}" >
                {{i.name}}
            </div>
            <div @click="lookMore" style="backgroundColor:#1797d6;color:#ffffff;position:absolute;right:0px;top:-4px; width:50px;border-radius: 30px;text-align:center;padding-top:4px;padding-bottom:4px" class="cell">更多</div>
       </div>






        <div @click="rowClick(item)" v-for="(item,index) in currentList" :key="index" style="padding-top:0px;margin-top:20px" class="progress-item">
            <span>{{item.key}}</span>
            <div class="prog">
                <el-progress :stroke-width="26" :percentage="item.ratio" />
                <span class="num">{{item.value}}</span>
            </div>

        </div>
       
    </div>

    <!-- 更多 :title="tabName"-->
    <el-dialog  :visible.sync="dialogTableVisible">
    <el-table :data="gridData" height="300px" @row-click="rowClick">
        <el-table-column :property="currentKey" label="名称" ></el-table-column>
        <el-table-column property="num" label="专利申请量"></el-table-column>
    </el-table>
    </el-dialog>








</el-card>
</template>

<script>
import {
    mapGetters
} from 'vuex'
import PanThumb from '@/components/PanThumb'
import Mallki from '@/components/TextHoverEffect/Mallki'
import { List } from 'echarts'
import {
    getGroupList
} from '@/api/retrieval'

export default {
    components: {
        PanThumb,
        Mallki
    },

    props: {
        boxData: {
            type: Object,
            default: function () {
                return {}
            }
        }
    },
    filters: {
        statusFilter(status) {
            const statusMap = {
                success: 'success',
                pending: 'danger'
            }
            return statusMap[status]
        },
        fomart(data) {
            return data 
        }
    },
    data() {
        return {
            statisticsData: {
                article_count: 1024,
                pageviews_count: 1024
            },
            myData: {},
            cellList:[
                {
                    id:1,
                    name:'申请人排名',
                    selected:true,
                    key:'applicants_stat'
                },
                  {
                    id:2,
                    name:'发明人排名',
                    key:"inventors_stat"
                },  {
                    id:3,
                    name:'专利权人排名',
                    key:'assignees_stat'
                },
            ],
            currentKey:"applicants_stat",
            currentList:[],
            tabName:"",
            dialogTableVisible:false,
            gridData: [],
        }
    },
    watch: {
        boxData: {
            handler(newV, oldV) {
                // console.log("12321", newV)
                 this.myData=newV
            },
            deep: true
        }
    },
    computed: {
        ...mapGetters([
            'name',
            'avatar',
            'roles'
        ])
    },
    mounted() {
        setTimeout(() => {
            this.myData = this.boxData      
            this.currentList=this.myData.applicants_stat

            this.tabName=this.cellList.filter(item=>{return item.selected })[0].name,
            this.currentKey=this.cellList.filter(item=>{return item.selected })[0].key,

            // this.selectMore()
            
            console.log("this.currentList",this.currentList)
        }, 500)
    },
    methods:{
        rowClick(row){
          
          // applicants_stat assignees_stat inventors_stat key
                      

           let data= {
                "queryConditions": [
                    {
                        "fieldName": this.currentKey,
                        "value": row.key||row.applicants_stat||row.assignees_stat||row.inventors_stat,
                        "boolType": 1
                    }
                ],
                "queryColumn": [],
                "pageIndex": 1,
                "pageSize": 20
            }

              console.log("row",data)
             

            localStorage.setItem("searchData", JSON.stringify(data))

            
                this.$router.push({
                    path: "/retrieval/tableList"
                })
            






        },
        lookMore(){
            // console.log("123")
            this.dialogTableVisible=true
            this.selectMore()
        },
        exchangeItem(i){
            this.currentKey=i.key
            let list = JSON.parse(JSON.stringify(this.cellList))
            list.forEach(item=>{
                item.selected=false
            })


            list.forEach(item=>{
                if(item.id == i.id){
                    item.selected=true
                    // this.currentList=this.myData[item.key]
                }
            })

            this.cellList=list
            this.currentList=this.myData[this.currentKey]
             this.tabName=this.cellList.filter(item=>{return item.selected })[0].name

            //  this.selectMore()
            console.log("this.currentList",this.currentList)
        },
        selectMore(){
           let data={
                "queryConditions": [
                ],
                "aggConditions":[
                    {
                        "fieldName": this.currentKey,
                        "limit": 100
                    }
                ]
            }


            getGroupList(data).then(res=>{
                console.log("res",res.data.staticsMapList)
                this.gridData=res.data.staticsMapList


            })




        }



    }
}
</script>

<style lang="scss">
.box-card-component {
    height: 365px;

    .el-card__header {
        padding: 0px !important;
    }
}
</style>
<style lang="scss" scoped>
.box-card-component {
    .tab{
       display: flex;
       flex-direction: row;
       .cell{
           font-size:16px;
        //    color:#1797d6;
           color:black;
           margin-right: 14px;
       }
       .active{
              font-size:16px;
           color:#1797d6;
           margin-right: 14px;
           border-bottom: 1px solid #1797d6;
           
        //    color:black
       }
    }
    .box-card-header {
        position: relative;
        height: 220px;

        img {
            width: 100%;
            height: 100%;
            transition: all 0.2s linear;

            &:hover {
                transform: scale(1.1, 1.1);
                filter: contrast(130%);
            }
        }
    }

    .mallki-text {
        position: absolute;
        top: 0px;
        right: 0px;
        font-size: 20px;
        font-weight: bold;
        
    }

    .panThumb {
        z-index: 100;
        height: 70px !important;
        width: 70px !important;
        position: absolute !important;
        top: -45px;
        left: 0px;
        border: 5px solid #ffffff;
        background-color: #fff;
        margin: auto;
        box-shadow: none !important;

        ::v-deep .pan-info {
            box-shadow: none !important;
        }
    }

    .progress-item {
        margin-bottom: 10px;
        font-size: 14px;

        ::v-deep {
            .prog {
                position: relative;;
                // margin-top:3px;
                .el-progress__text {
                    display: none;
                }
                .num{
                  position:absolute;
                  right:16px;
                  top:0
                }
            }
        }
    }

    @media only screen and (max-width: 1510px) {
        .mallki-text {
            display: none;
        }
    }
}
</style>
